<template>
	<view class="container">
		<AddressSelect :data="totalDetail.address"></AddressSelect>
		<view v-if="Object.keys(totalDetail).length" class="order-content">
			<view class="title">
				<view class="name">
					订单内容
				</view>
				<view class="num">
					共2个
				</view>
			</view>
			<view class="order-ctn-item" v-for="item in totalDetail.goodslist" :key="item.id">
				<image class="preview-img" :src="item.original_img" mode="aspectFit"></image>
				<view class="file-detail">
					<view class="file-detail-name">
						{{item.goods_name}}
					</view>
					<view class="file-detail-desc">
						{{item.goods_remark}}
					</view>
				</view>
				<view class="file-price">
					￥{{item.goods_price}}
				</view>
			</view>
		</view>
		<view v-if="Object.keys(totalDetail.address).length" class="order-detail">
			<view class="title">
				订单详情
			</view>
			<view class="order-detail-item">
				<view class="left">
					商品金额
				</view>
				<view class="right">
					￥{{(totalDetail.total_price - totalDetail.goods_fee)?.toFixed(2) || 0}}
				</view>
			</view>
			<view class="order-detail-item">
				<view class="left">
					邮费
					<!-- <image src="@/static/img/unknow.png" mode="aspectFit"></image> -->
				</view>
				<view class="right">
					￥{{totalDetail.goods_fee}}
				</view>
			</view>
			<view class="order-detail-item coupon" @click="showCoupon = true">
				<view class="left">
					优惠劵
				</view>
				<!-- <span>已选择推荐优惠</span> -->
				<view class="right"
					:style="{color: totalDetail.discount_id && totalDetail.discount_id !== -1 ? '#FF7300' : ''}">
					{{totalDetail.discount_id && totalDetail.discount_id !== -1 ? '-' + totalDetail.discount_price : '无可用优惠'}}
					<span class="icon">></span>
				</view>
			</view>
			<view class="order-detail-item">
				<view class="left">
					快递方式
				</view>
				<view class="right">
					顺丰速运
				</view>
			</view>
			<view class="order-detail-foot">
				合计: <span>￥</span><text>{{totalDetail.allprices}}</text>
			</view>
		</view>

		<view v-if="Object.keys(totalDetail).length" class="footer safe-btm">
			<view class="total">
				<view class="top">
					合计: <span>￥</span><text>{{totalDetail.allprices}}</text>
				</view>
				<span v-if="Number(totalDetail.discount_price)" class="bottom">共减￥{{totalDetail.discount_price}}</span>
			</view>
			<view class="submit-btn" @click="handleSubmit">
				立即支付
			</view>
		</view>

		<CouponPopup v-model="showCoupon" :list="totalDetail.discount_list" :default-id="totalDetail.discount_id"
			@confirm="handleSelectCoupon" />
	</view>
</template>

<script>
	import {
		OrderApi,
		PrintApi
	} from '@/api';
	import {
		toPromise
	} from '@/utils/util';
	import AddressSelect from '../components/AddressSelect.vue'
	import CouponPopup from '../components/CouponPopup.vue';
	export default {
		components: {
			AddressSelect,
			CouponPopup,
		},
		data() {
			return {
				// 商品列表
				goodsList: [],
				// 总计结果
				totalDetail: {
					address: {}, // 地址
				},
				// 展示优惠券
				showCoupon: false,
				// 选中优惠券
				selectCoupon: {},
			}
		},
		onLoad() {
			this.getAddress()
		},
		onShow() {
			this.getPrice()
		},
		methods: {
			/**
			 * 获取价格
			 */
			getPrice() {
				return new Promise(async (resolve, reject) => {
					try {
						this.$showLoading()
						let form = {
							address_id: this.totalDetail.address?.address_id
						}
						// 代金券
						if (this.selectCoupon.id) form.voucher_id = this.selectCoupon.id
						const res = await PrintApi.SettleAccounts(form)
						this.totalDetail = res
						uni.hideLoading()
					} catch (err) {
						console.log('获取价格失败= ', err);
						uni.hideLoading()
						this.$showToast(err || '获取价格失败')
					}
				})
			},
			// 选中优惠券
			handleSelectCoupon(e) {
				this.selectCoupon = e
				this.getPrice()
			},
			// 展示优惠券选择
			handleShowCoupon() {
				if (this.totalDetail.discount_id === -1 || !this.totalDetail.discount_id)
					return
				this.showCoupon = true
			},
			// 挂载监听
			handleChangeAddress() {
				// 选中地址
				uni.$on('selectAddress', (res) => {
					this.totalDetail.address = res
				})
			},
			// 获取地址
			getAddress() {
				// 挂载更改地址
				this.handleChangeAddress()
			},
			// 结算
			async handleSubmit() {
				try {
					this.$showLoading()
					let form = {
						type: 'cart',
						action: 'submit_order',
						address_id: this.totalDetail.address.address_id,
						pay_code: 'weixin', // prod weixin dev credit 余额
						ship_type: 1,
					}
					// 代金券
					if (this.selectCoupon.id) form.voucher_id = this.selectCoupon.id
					const orderRes = await PrintApi.CreatOrderInfo(form)
					const payInfoRes = await OrderApi.MiniPayOrder({
						order_id: orderRes.order.order_id,
						openid: this.$store.getters['token']
					})
					const res = await toPromise(uni.requestPayment, {
						provider: 'wxpay',
						...payInfoRes.payinfo,
					})
					uni.hideLoading()
					this.$showToast('支付成功', 2000, true)
					const timer = setTimeout(() => {
						this.$navTo('pages/mines/myOrder', {}, 'redirectTo')
						clearTimeout(timer)
					}, 2000)
				} catch (err) {
					console.log('handleSubmit= ', err);
					uni.hideLoading()
					this.$showToast(err || err.message || '支付失败', 2000, true)
					const timer = setTimeout(() => {
						this.$navTo('pages/mines/myOrder', {}, 'redirectTo')
						clearTimeout(timer)
					}, 2000)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	@mixin com-ctn() {
		margin-top: 30rpx;
		border-radius: 10rpx;
		background: #ffffff;
		box-shadow: 0 16rpx 40rpx 0 #00000008;

		.title {
			display: flex;
			align-items: center;
			padding: 30rpx;
			color: #000000;
			font-size: 28rpx;
			border-bottom: 2rpx solid #f3f3f3;

			.num {
				margin-left: auto;
				color: #a4a4a4;
				font-size: 24rpx;
			}
		}
	}

	.order-content {
		@include com-ctn;
	}

	.order-ctn-item {
		display: flex;
		align-items: flex-start;
		padding: 30rpx;
	}

	.preview-img {
		width: 44rpx;
		height: 44rpx;
	}

	.file-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-top: 2rpx;
		margin-left: 10rpx;
		max-width: 70%;
		overflow-wrap: break-word;
	}

	.file-detail-name {
		color: #000000;
		font-size: 28rpx;
	}

	.file-detail-desc {
		margin-top: 10rpx;
		color: #989898;
		font-size: 20rpx;
	}

	.file-price {
		margin-left: auto;
		margin-top: 8rpx;
		color: #000000;
		font-size: 24rpx;
	}

	.order-detail {
		@include com-ctn;
	}

	.order-detail-item {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0 30rpx;
		font-size: 24rpx;

		&:first-child {
			margin-top: 28rpx;
		}

		>.left {
			display: flex;
			align-items: center;
			color: #767676;

			>image {
				margin-left: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		>.right {
			display: flex;
			align-items: center;
			color: #000000;
		}
	}

	.coupon {
		>.left {
			>span {
				margin-left: 10rpx;
				width: 160rpx;
				height: 28rpx;
				line-height: 28rpx;
				border-radius: 4rpx;
				background: #ffecdc;
				color: #ff7300;
				text-align: center;
				font-size: 20rpx;
			}
		}

		>.right {
			color: #FF7300;

			>span {
				margin-left: 5rpx;
				color: #767676;
			}
		}
	}

	.order-detail-foot {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		margin-top: 30rpx;
		padding: 30rpx;
		border-top: 2rpx solid #f3f3f3;
		color: #606060;
		font-size: 20rpx;

		span,
		text {
			color: #FF7300;
		}

		text {
			font-size: 36rpx;
			line-height: 100%;
		}
	}

	.footer {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 30rpx;
		padding-left: 30rpx;
		height: 100rpx;
		background: #ffffff;
		z-index: 1000;
	}

	.total {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		color: #b5b5b5;
		font-size: 20rpx;

		>span {
			color: #FF7300;
		}

		>.top {
			display: flex;
			align-items: flex-end;

			>text {
				font-size: 36rpx;
				color: #FF7300;
				line-height: 100%;
			}
		}

		>.bottom {
			margin-top: 5rpx;
		}
	}

	.submit-btn {
		margin-left: 20rpx;
		width: 228rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		background: $gradient-bg-color;
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
	}
</style>